@import '@influxdata/clockface/dist/variables.scss';

.write-data--details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.write-data--details-thumbnail {
  order: 1;
  width: 200px;
  margin-bottom: $cf-marg-c;
  padding: $cf-marg-d;
  background-color: $g3-castle;
  border-radius: $cf-radius;

  img {
    width: 100%;
  }
}

.write-data--details-content {
  order: 2;
  width: 100%;
  font-size: 1.3em;
}

.write-data--details-widget {
  width: 100%;
  background-color: $g3-castle;
  padding: $cf-marg-c;
  margin-top: $cf-marg-c;
  border-radius: $cf-radius;
}

.write-data--details-widget-title {
  margin-bottom: $cf-marg-b;
  padding-left: $cf-marg-b + $cf-marg-a;
  padding-right: $cf-marg-b + $cf-marg-a;
}

.markdown-format .code-snippet--text {
  background-color: $g1-raven;
}

@media screen and (min-width: $cf-grid--breakpoint-md) {
  .write-data--details {
    flex-direction: row;
    align-items: flex-start;
  }

  .write-data--details-thumbnail {
    flex: 1 0 200px;
    width: auto;
    margin-right: $cf-marg-e;
    margin-bottom: 0;
  }

  .write-data--details-content {
    width: auto;
    flex: 8 0 0;
  }

  .write-data--details-sidebar {
    flex: 1 0 200px;
    width: auto;
    margin-left: $cf-marg-c;
    margin-top: 0;
  }
}

// Helper Widget
.write-data-helper--heading {
  display: flex;
  align-items: center;
  width: 100%;
  opacity: 0.75;
  transition: opacity 0.25s ease;

  &:hover {
    opacity: 1;
  }

  &:hover,
  &:hover > * {
    cursor: pointer;
  }
}

.write-data-helper--heading__expanded {
  opacity: 1;
}

.write-data-helper--caret {
  transition: transform 0.25s ease;
  transform: rotate(0deg);
  margin-right: $cf-marg-b;
}

.write-data-helper--heading__expanded .write-data-helper--caret {
  transform: rotate(90deg);
}
